<script setup lang="ts">
import { type GridContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { Component } from '@/models/component';


const props = defineProps<{ model: GridContainer }>()
const children = props.model.children as Component[]

const gridAreas = props.model.areas
const gridTemplateColumns = props.model.gridTemplateColumns
const gridTemplateRows = props.model.gridTemplateRows

const alignItem = props.model.align ?? 'unset'
const verticalAlign = props.model.verticalAlign ?? 'unset'



</script>

<template>
    <div class="grid-box" data-pybi-auto-width>

        <!-- <div class="item" v-for="cp in children" :style="{ 'grid-area': cp.gridArea }">
            <Dynamic :component="cp"></Dynamic>
        </div> -->

        <Dynamic :component="cp" v-for="cp in children" :key="cp.id">
        </Dynamic>
    </div>
</template>

<style scoped lang="less">
.grid-box {
    display: grid;
    grid-template-areas: v-bind(gridAreas);
    grid-template-columns: v-bind(gridTemplateColumns);
    grid-template-rows: v-bind(gridTemplateRows);
    gap: 0.8rem;

    justify-items: v-bind(alignItem);
    align-items: v-bind(verticalAlign);

    width: 100%;

    &>.item {
        // width: 100%;
        display: flex;

        :deep(> p) {
            overflow: hidden;
            overflow-wrap: break-word;
        }
    }

    :deep(>*) {
        overflow-x: auto;
        width: 100%;
    }

}
</style>